<template>
  <div id="app">
    <div id="map" class="map"></div>
  </div>
</template>
<script>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import {Overlay} from "ol"

import XYZ from "ol/source/XYZ";
import Vector from "ol/source/Vector";
import * as olProj from "ol/proj";
import GeoJSON from "ol/format/GeoJSON"; //用来加载矢量数据
import WebGLPointsLayer from "ol/layer/WebGLPoints"; //使用webgl渲染
import { Feature } from "ol";
import Point from "ol/geom/Point";
import ImageLayer from "ol/layer/Image";
import { ImageWMS } from "ol/source";

export default {
  name: "Test2VueOlApp",

  data() {
    return {
      olMap: null,
      vectorSource: null,
      pointsLayer: null,
      newStyle: {
        symbol: {
          symbolType: "circle",
          size: [
            "interpolate",
            ["linear"],
            ["get", "population"],
            40000,
            5,
            2000000,
            8,
          ],
          color: [
            "interpolate",
            ["linear"],
            ["get", "latitude"],
            -80,
            "#ff14c3",
            -20,
            "#ff621d",
            20,
            "#ffed02",
            80,
            "#00ff67",
          ],
          offset: [0, 0],
          opacity: 0.95,
        },
      },
    };
  },

  mounted() {
    this.init();
  },

  methods: {
    init() {
      this.olMap = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new XYZ({
              wrapX: false,
              url: "https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
            }),
          }),
        ],
        view: new View({
          // 将西安作为地图中心
          center: olProj.fromLonLat([108.945951, 34.465262]),
          // projection:"EPSG:4326",
          zoom: 4,
          minZoom: 3,
        }),
        // controls: [],
      });

      var imageLayer = new ImageLayer({
        source: new ImageWMS({
          ratio: 1,
          url: "http://localhost:8084/geoserver/ne/wms",
          crossOrigin: "anonymous", //跨域声明
          params: {
            SERVICE: "WMS",
            VERSION: "1.1.1",
            REQUEST: "GetMap",
            FORMAT: "image/png",
            TRANSPARENT: true,
            STYLES: null,
            LAYERS: "ne:point1",
            exceptions: "application/vnd.ogc.se_inimage",
            SRS: "EPSG:4326",
            WIDTH: 769,
            HEIGHT: 488,
            BBOX: "69.50390625,12.1552734375,137.0390625,54.9931640625",
          },
        }),
      });
      this.olMap.addLayer(imageLayer);

      let style = {
        symbol: {
          symbolType: "image",
          size: 3,
          color: "red",
        },
      };
      let features = [];
      for (let i = 0; i < 5000; i++) {
        let ran = Math.random() * 360;
        let ran2 = Math.random() * 360;
        let lon = -180 + ran;
        let lat = -90 + ran2;
        // console.log(lon, lat);
        // let feature = new Feature({
        //   geometry: new Point(olProj.fromLonLat([lon, lat])),
        // });
        // features.push(feature);

        var ele = document.createElement("div");
        ele.className = "ol-point"
        var point_overlay2 = new Overlay({
          element: ele,
          positioning: "center-center",
        });
        point_overlay2.setPosition(olProj.fromLonLat([lon, lat]));

        // this.olMap.addOverlay(point_overlay2);
      }
      // let vectorSource = new Vector({
      //   features: features,
      //   wrapX: false,
      //   //   url: "http://localhost:9881/data.geojson",
      //   //   format: new GeoJSON(),
      // });
      // let layer = new WebGLPointsLayer({
      //   source: vectorSource,
      //   style: style,
      //   zIndex: 999,
      //   wrapX: false,
      // });
      // this.olMap.addLayer(layer);
    },
  },
};
</script>
<style>
html,
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}
#app,
#map {
  width: 100%;
  height: 100%;
}
.ol-point{
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
border: 1px black solid;
}
</style>
